<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/element-plus@2.3.6-index.css" rel="external nofollow" target="_blank">
    <!-- 引入js文件 -->
    <script src="../js/vue@3.3.4.js"></script>
    <script src="../js/element-plus@2.3.6.js" rel="external nofollow"></script>
    <script src="../js/jquery-3.6.1.js"></script>
    <title>排行榜</title>
</head>

<body>
    <div id="rank">
        <div class="title">排行榜</div>
        <div class="day-rank">
            天排行榜({{today}})
        </div>
        <el-table :data="rankData" style="width: 100%">
            <el-table-column label="排名" width="180">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="time" label="时间" :formatter="timeFormatter"> </el-table-column>
            <el-table-column prop="points" label="分数" width="200"> </el-table-column>
            <el-table-column prop="difficulty_factor" label="难度" width="380" :formatter="diffFormatter"> </el-table-column>
        </el-table>
    </div>
    <script src="../js/rank.js"></script>
</body>

</html>